<template>
    <div class="comment-popup">
        <van-popup v-model="show" position="bottom" @close="onClose">
            <div class="body">
                <div class="list">
                    <div v-if="isShowDeleteBtn" class="btn" @click="onDelete">删除</div>
                    <div class="btn" @click="onCollect">收藏</div>
                </div>

                <div class="btn-close" @click="onClose">取消</div>
            </div>
        </van-popup>
    </div>
</template>
 
<script>
export default {
    props: {
        item: Object,
        value: Boolean
    },
    data() {
        return {
            show: false
        };
    },

    computed: {
        isShowDeleteBtn() {
            return this.item.userInfo.uid === this.$store.state.userInfo.uid;
        }
    },

    watch: {
        value(v) {
            this.show = v;
        }
    },

    methods: {
        onClose() {
            this.$emit("input", false);
        },

        onDelete() {
            console.log(this.item, this.$store.state.userInfo);
            this.$cloudApi.deletePost(this.item._id).then(res => {
                this.$showToast("删除成功");
                this.onClose();
                this.$emit("delete", false);
            });
        },

        onCollect() {
            this.$showToast("此功能暂未开放~");
        }
    }
};
</script>


<style lang="less" scoped>
.comment-popup {
    .body {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background: #fff;
        font-size: 32px;
        padding: 10px 40px 30px 40px;

        .list {
            .btn {
                padding: 40px 0;
            }
        }

        .btn-close {
            background: #eee;
            border-radius: 18px;
            padding: 20px 0;
            text-align: center;
        }
    }
}
</style>